<template>
  <!-- 准备绘制图标的盒子 -->
  <div ref="radar" class="radar-echart"></div>
</template>

<script >

export default {
  data () {
    return {
      timesr: null,
      list: [
        {
          value: [10, 30, 50, 70, 90, 0],
          name: '张0'
        },
        {
          value: [0, 90, 80, 50, 30, 0],
          name: '张1'
        },
        {
          value: [20, 1, 10, 5, 90, 70],
          name: '张2'
        }
      ]
    }
  },
  mounted () {
    this.darwRadr()
    // this.sum()
  },
  methods: {
    darwRadr () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.echarts.getInstanceByDom(this.$refs.radar, 'dark')
      if (myChart == null) { // 如果不存在，就进行初始化
        myChart = this.echarts.init(this.$refs.radar, 'dark')
      }
      const option = {
        // title: {
        //   text: '基础雷达图'
        // },
        tooltip: {},
        // legend: {
        //   data: ['张三', '李四']
        // },
        radar: {
          // shape: 'circle',
          axisName: {
            // textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
            // }
          },
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          // areaStyle: { normal: {} },
          // data: [
          //   {
          //     value: [10, 1, 100, 5, 100, 0],
          //     name: '张三'
          //   },
          //   {
          //     value: [50, 50, 50, 50, 50, 10],
          //     name: '李四'
          //   },
          //   {
          //     value: [80, 40, 70, 10, 20, 90],
          //     name: '王伟'
          //   }
          // ]
          data: this.list
        }]
      }
      // 绘制图表
      myChart.setOption(option)
    },
    // 随机数
    sum () {
      this.timesr = setInterval(() => {
        const a = Math.floor(Math.random() * 100)
        const b = Math.floor(Math.random() * 100)
        const c = Math.floor(Math.random() * 100)
        this.list[0].value.push(a, b, c)
        this.list[0].value.splice(0, 3)
        this.list[1].value.push(b, c)
        this.list[1].value.splice(0, 2)
        this.list[2].value.push(c)
        this.list[2].value.splice(0, 1)
        this.darwRadr()
        // const data = []
        // // 外层循环造3条数据
        // for (let index = 0; index < 3; index++) {
        //   const per = { value: [], name: `李${index}` }
        //   // 造6个指标项的数据=》value
        //   for (let j = 0; j < 6; j++) {
        //     per.value.push(Math.floor(Math.random() * 100 + 1))
        //   }
        //   data.push(per)
        // }
      }, 1000)
    },
    // 关闭定时器
    clear () {
      clearInterval(this.timesr)
    }
  }
}
</script>

<style scoped>
.radar-echart {
  width: 100%;
  height: 400px;
}
</style>
